<template>
  <div class="wrap" v-show="isShow">
    <div class="choose-difficulty-level-dialog bg-white px-24px py-30px relative flex flex-col">
      <div class="header relative w-full flex justify-center items-center text-white">
        <img class="close absolute" src="static/icons/close.png" mode="" @click="close" />
        <div class="title font-medium text-262A30">请选择</div>
      </div>
      <div class="main text-A3A3A3 py-30px flex-center flex-1">
        <el-radio-group v-model="value">
          <div
            class="w-full flex justify-center mb-10px"
            v-for="i in questionDifficultyType"
            :key="i.value"
            style=""
          >
            <el-radio
              class="radio-item w-full"
              :style="isEnglishSubject ? 'margin-left: -0.5rem' : ''"
              :label="
                isEnglishSubject
                  ? `${i.label}（${getEnglishQuestionProgress(i)}）`
                  : i.value == recommendLevel
                  ? `${i.label}（推荐）`
                  : i.label
              "
            >
            </el-radio>
          </div>
        </el-radio-group>
      </div>
      <div class="footer flex justify-center">
        <CustomButton class="block" style="width: 2rem" @click="submit">提交</CustomButton>
      </div>
    </div>
  </div>
</template>

<script>
import CustomButton from '@/components/button'
import { mapActions } from 'vuex'

export default {
  components: {
    CustomButton
  },
  props: {},
  data() {
    return {
      isShow: false, // 是否显示
      questionDifficultyType: [], // 题目难度字典
      value: '',
      willPracticeItem: {},
      recommendLevel: null, // 推荐难度
      isEnglishSubject: false // 是否是英语听说科目
    }
  },
  async created() {
    this.questionDifficultyType = await this.getDictByType('question_difficulty_type')
  },
  methods: {
    ...mapActions(['getDictByType']),
    open(item) {
      const { rankScore } = item
      if (item.hasOwnProperty('questionNumRespDTOList')) {
        this.isEnglishSubject = true
      } else {
        this.isEnglishSubject = false
      }

      const getRecommendLevel = (score) => {
        if (!score) return 17

        if (score >= 0 && score <= 10) {
          return 17
        }

        if (score > 10 && score <= 20) {
          return 18
        }

        if (score > 20 && score <= 50) {
          return 19
        }

        if (score > 50 && score <= 70) {
          return 20
        }

        if (score > 70) {
          return 21
        }
      }

      this.recommendLevel = getRecommendLevel(rankScore)
      const recommendText = this.isEnglishSubject ? '' : '（推荐）'
      this.value =
        this.questionDifficultyType.find((type) => type.value == this.recommendLevel).label +
        recommendText
      this.willPracticeItem = item
      this.isShow = true
    },
    // 获取英语听说做题进度
    getEnglishQuestionProgress(item) {
      try {
        const { questionNumRespDTOList } = this.willPracticeItem
        if (questionNumRespDTOList) {
          const { questionDoneNum, questionAllNum } = questionNumRespDTOList.find(
            (i) => i.difficultyLevel === item.value
          )
          return `已完成${questionDoneNum}/${questionAllNum}`
        } else {
          return `已完成${0}/${0}`
        }
      } catch (error) {
        return ''
      }
    },
    close() {
      this.isShow = false
    },
    submit() {
      const type = this.questionDifficultyType.find(
        (type) => type.label === this.value.replace(/（[\w\W]*）/, '')
      )
      if (!!type) {
        const { value: difficultyLevel } = type
        const { willPracticeItem: item } = this

        if (!difficultyLevel || JSON.stringify(item) === '{}') return

        this.close()
        this.$emit('submit', item, difficultyLevel)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: rgba($color: #000000, $alpha: 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1999;

  .choose-difficulty-level-dialog {
    width: 432px;
    height: 403px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    border: 1px solid #707070;
    font-size: 26px;
    .header {
      .close {
        width: 16px;
        height: 16px;
        top: -12px;
        right: -8px;
      }

      .title {
        font-size: 26px;
        line-height: 30px;
      }
    }

    .main {
      font-size: 26px;
      line-height: 28px;

      .radio-item {
        width: 152px;
      }
    }

    .footer {
    }
  }
}

/deep/ .el-radio {
  display: flex;
  align-items: center;

  .el-radio__input {
    display: flex;
    align-items: center;
  }

  .el-radio__inner {
    width: 28px;
    height: 28px;
  }

  .el-radio__label {
    font-size: 26px;
    line-height: 26px;
    color: #333;
    white-space: inherit;
  }
}

/deep/ .el-radio.is-checked {
  .el-radio__label {
    color: #51c3ff;
  }
}
</style>
